<template>
  <div class="danyunmu base-background-img">
    <div class="a" @click="playFun(a)">
        <img src="~@/assets/youxiaoxianjie/danyunmu/a.png">
    </div>
    <div class="o" @click="playFun(o)">
        <img src="~@/assets/youxiaoxianjie/danyunmu/o.png">
    </div>
    <div class="e" @click="playFun(e)">
        <img src="~@/assets/youxiaoxianjie/danyunmu/e.png">
    </div>
    <div class="i" @click="playFun(i)">
        <img src="~@/assets/youxiaoxianjie/danyunmu/i.png">
    </div>
    <div class="u" @click="playFun(u)">
        <img src="~@/assets/youxiaoxianjie/danyunmu/u.png">
    </div>
    <div class="uu" @click="playFun(uu)">
        <img src="~@/assets/youxiaoxianjie/danyunmu/uu.png">
    </div>
    <c-pdf @closePdf="closePdf" v-if="isshowpdf" :info="info" :infourl="pdfurl"></c-pdf>
  </div>
</template>

<script>
  export default {
    name: 'danyunmu',
    data () {
      return {
        isshowpdf: false,
        infourl: '',
        info: '',
        a: {
          url: 'static/youxiao/pdf/danyunmu/a.pdf',
          data: []
        },
        o: {
          url: 'static/youxiao/pdf/danyunmu/o.pdf',
          data: []
        },
        e: {
          url: 'static/youxiao/pdf/danyunmu/e.pdf',
          data: []
        },
        i: {
          url: 'static/youxiao/pdf/danyunmu/i.pdf',
          data: []
        },
        u: {
          url: 'static/youxiao/pdf/danyunmu/u.pdf',
          data: []
        },
        uu: {
          url: 'static/youxiao/pdf/danyunmu/uu.pdf',
          data: []
        }
      }
    },
    methods: {
      playFun: function (item) {
        console.log(item)
        this.isshowpdf = true
        this.pdfurl = item.url
        this.info = item.data
      },
      closePdf: function () {
        this.isshowpdf = false
      }
    }
  }
</script>

<style scoped>
.danyunmu {
  background: url(~@/assets/youxiaoxianjie/danyunmu/bg.png);
}
.danyunmu > div {
  position: absolute; 
}
.a {
  top: 200px;
  left: 260px;
}
.o {
  top: 235px;
  left: 540px;
}
.e {
  top: 235px;
  left: 850px;
}
.i {
  top: 410px;
  left: 303px;
}
.u {
  top: 450px;
  left: 560px;
}
.uu  {
  top: 415px;
  left: 840px;
}
</style>
